<template>
  <div class="body">
  <div id="hope">
    <div class="container container-hope">
      <div class="row">
       <!-- <div class="text col-sm-3 col-md-3 col-sm-offset-3 col-md-offset-3 hope1-text">-->
          <div class="thumbnai2">
          <!--  <img src="../../img/timg01.jpg" alt="愿景" class="auto img-responsive center-block" id="hope1-img">-->
            <div class="caption">
              <h4 id="rollhead"></h4>
              <div class="newtitle">
              <p  class="newtitle1" >杭州力为科技有限公司参展2017年中国国际工业博览会（上海国家会展中心11月7-11日），展位号8.1H F219
              </p>
                <p  class="newtitle2" >欢迎莅临参观指导！
                </p>
            </div>
            </div>
          </div>
      </div>
    </div>



  </div>
    <div  class="home1">
    <div class="row1">

      <div class="col-sm-3 col-md-3">
        <div class="thumbnail">
          <router-link to="/product1">
            <img src="../../img/img06.jpg" alt="bmc" class="pro-img2">
            <div class="product1">
              <p> 运动控制器 </p>
            </div>

          </router-link>
        </div>
      </div>

      <div class="col-sm-3 col-md-3">
        <div class="thumbnail">
          <router-link to="product2">
            <img src="../../img/img04.jpg" alt="ccx1" class="pro-img1">
            <p>SIO数据采集终端</p>
          </router-link>
        </div>

      </div>
      <!--<div class="col-sm-3 col-md-3">
        <div class="thumbnail">
          <router-link to="product3">
            <img src="../../img/img41.png" alt="ccx1" class="pro-img3">
            <p>伺服驱动器</p>
          </router-link>
        </div>
      </div>
      <div class="col-sm-3 col-md-3">
        <div class="thumbnail">
          <router-link to="product4">
            <img src="../../img/imge21.jpg" alt="ccx1" class="pro-img3">
            <p>MES（生产制造执行系统）</p>
          </router-link>
        </div>
      </div>-->

      </div>
      <div class="col-sm-5 col-md-3">
        <div class="thumbnail">
          <router-link to="/product3">
            <img src="../../img/img03.png" alt="ccx1" class="pro-img3">

          <p>伺服驱动器</p>
          </router-link>
        </div>
      </div>
    <div class="col-sm-4 col-md-3">
      <div class="thumbnail">
        <router-link to="/product4">
          <img src="../../img/imge21.jpg" alt="bmc" class="pro-img2">
        <p>生产制造执行系统</p>
        </router-link>
      </div>
    </div>
    </div>
    <div class="wedo1">
      <div class="container">
        <div class="wedo-main">
          <div class="we-do-top">
            <h3>What We Do</h3>
            <p>公司致力于为企业客户建立M2M（机器到机器/人）的工业物联网和生产制造执行系统。在现场设备的网络化实时控制、工业数据实时采集与处理的基础上，通过生产管理和现场设备的“一网到底”式的互联，实时感知工厂中各种物体（如机器、物料、产品和人）的状况，并通过MES直接指挥各部门协同生产，管理层通过移动物联网监视工厂运行状态，实现基于GIS服务的生产全过程可视化管理、优化调度。</p>
          </div>
          <div class="we-do-bottom">
            <div class="col-md-3 we-do-grid">
              <img src="../../img/w1.png" alt="">
              <h4></h4>
              <p>专业的生产车间</p>
            </div>
            <div class="col-md-3 we-do-grid">
              <img src="../../img/w2.png" alt="">
              <h4></h4>
              <p>业界领先的技术团队</p>
            </div>
            <div class="col-md-3 we-do-grid">
              <img src="../../img/w3.png" alt="">
              <h4></h4>
              <p>严谨的实施队伍</p>
            </div>
            <div class="col-md-3 we-do-grid">
              <img src="../../img/w4.png" alt="">
              <h4></h4>
              <p>规范的管理模式</p>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="who-we">
      <div class="container">
        <div class="who-we-main">
          <h3>Who We Are</h3>
          <p>杭州力为科技是一家专业从事工业自动化和工业物联网技术研究、开发和应用的公司。公司认为只有专注技术，为客户创造价值，才是公司的价值所在！</p>

          <div class="clearfix"></div>
        </div>
      </div>
    </div>
    <div class="industry">
      <div class="container">
        <div class="industry-main">
          <h2><router-link to="#home">力为荣誉</router-link></h2>
          <p>目前公司已经投入大量资金开发了拥有自主知识产权的硬件产品<br>获得授权发明专利10余项。</p>
          <p><br></p>
          <div class="industry-btn">
            <button class="btn btn-default">
              <a v-on:click="rollhead">力为欢迎您!</a>
            </button>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    data: {
      return: {
      }
    },
    methods: {
      rollhead: function () {
        document.getElementById('hope').scrollIntoView(true);
      }
    }
  };

</script>




<style lang="stylus" rel="stylesheet/stylus">
  #hope
    width: 100%
    height: 500px
    background-image: url(../../img/img02.png)
    background-size: 100%
    margin-top: 0
    margin-bottom :7px
  .container-hope
    padding: 200px 100px 0px 100px

  /*#hope img */
  /*margin: 100px 120px 0 ;*/
  /*height: 40%*/
  /*width: 40%*/

  #hope h4
    text-align: center
    font-size: 27px
    color: #000

  /*#hope p
    text-align: center
    font-size: 14px
    color: #000*/
  .wedo1
    padding: 20px 20px 10px
    z-index :-1

  .wedo1 h3
    padding :0
    text-align: center
    font-size: 40px;
    font-style: italic;
    color: #3affd5;


  .we-do-top h3

    font-size: 40px
    font-style: italic
    width: 300px
    position: relative
    left: 400px

  .we-do-top p
    padding: 0 100px 20px
    text-indent: 2em



  .we-do-grid
    text-align: center


  .who-we
    padding: 50px 0 20px
    background-color: #358ea1
    text-align: center
    color: #FFFFFF


  .who-we h3
    text-align: center
    font-size: 40px
    font-style: italic


  .who-we p
    font-size: 16px
    margin: 20px
  .industry {
    background-image: url("../../img/home-bann.jpg");
    width: 100%;
    /*height:544px;*/
    text-align: center;
    color: #FFFFFF;
    font-size: 15px;

  }

  .industry-main
    padding: 40px 100px 20px


  .industry h2
    margin: 15px
    color: #45a0e2
    font-size: 30px


  .industry a
    text-decoration: none



  .pro1-p
    text-indent: 2em

  .pro-content
    padding-top: 60px
  .product2
    text-align: center
    margin: 0 0 40px 0


  .pro2-h2
    margin: 0 0 20px 0

  .con-pro
    margin-top:70px
  .thumbnail
    top: 5px

  .newtitle
    margin 0 10px 10px
  text

  .thumbnai2
   color red


  .con-pro-text
    vertical-align: middle; /*垂直居中*/
    /*vertical-align: middle;*/
    padding: 0 20px 0 0
    line-height: 1.8em

  .con-pro-img
    margin:  0
    text-align: center

  .newtitle
    background-color red
    margin :0px  68px 65px
  .newtitle1
    color yellow
    font-size large
  .newtitle2
    color yellow
    font-size large
    text-align center

  .con-pro-imgLast
    margin: 0 0 20px
    text-align: center
  .home1
    text-align: center
    margin: 0 0 40px 0

  .we-do-top{
     /* text-align: center;*/
    position: relative;
    z-index : -1
    }

</style>
